<template>
  <div class="questions-preview">
    <el-row :gutter="20" class="information">
      <el-col :span="6"
        >【题型】:
        <span v-if="questionsList.questionType === '1'">单选</span>
        <span v-else-if="questionsList.questionType === '2'">多选</span>
        <span v-else>简答</span>
      </el-col>
      <el-col :span="6">【编号】: {{ questionsList.id }} </el-col>
      <el-col :span="6"
        >【难度】:
        <span v-if="questionsList.difficulty === '1'">简单</span>
        <span v-else-if="questionsList.difficulty === '2'">一般</span>
        <span v-else>困难</span>
      </el-col>
      <el-col :span="6">【标签】:{{ questionsList.tags }}</el-col>
    </el-row>

    <el-row :gutter="20" class="information">
      <el-col :span="6">【学科】:{{ questionsList.subjectName }}</el-col>
      <el-col :span="6">【目录】:{{ questionsList.directoryName }}</el-col>
      <el-col :span="6">【方向】:{{ questionsList.direction }}</el-col>

    </el-row>

    <hr />
    <el-row :gutter="20">
      <el-col :span="6">【题干】:</el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6" class="title" v-html="questionsList.question"></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">
        <span v-if="questionsList.questionType === '1'"
          >单选题选项:(以下选中的选项为正确答案)</span
        >
        <span v-if="questionsList.questionType === '2'"
          >多选题选项:(以下选中的选项为正确答案)</span
        >
        <span v-else></span>
      </el-col>
    </el-row>
    <!-- 单选框 -->
    <el-radio-group
      v-model="radio"
      v-if="questionsList.questionType === '1'"
      class="group"
    >
      <template>
        <el-radio
          :label="item.isRight"
          v-for="(item, index) in questionsList.options"
          :key="index"
          disabled
          >{{ item.title }}</el-radio
        >
      </template>
    </el-radio-group>

    <!-- 复选框 -->
    <el-checkbox-group
      class="group"
      v-model="list"
      v-else-if="questionsList.questionType === '2'"
    >
      <el-checkbox
        :label="item.title"
        v-for="(item, index) in questionsList.options"
        disabled
        :key="index"
      ></el-checkbox>
    </el-checkbox-group>

    <div v-else></div>

    <hr />
    <el-row :gutter="20">
      <el-col :span="4">【参考答案】:</el-col>
      <el-col :span="6">
        <el-button type="danger" @click="videoShow = true"
          >视频答案预览</el-button
        >
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <video
          :src="questionsList.videoURL"
          controls="controls"
          v-show="videoShow"
        ></video>
      </el-col>
    </el-row>
    <hr />

    <el-row :gutter="20">
      【答案解析】:<span
        v-html="questionsList.answer"
        class="answer-analysis"
      ></span>
    </el-row>

    <el-row :gutter="20">
      【题目备注】:<span>{{ questionsList.remarks }}</span>
    </el-row>
    <hr />
  </div>
</template>

<script>
// 导入 api
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  components: {},
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      radio: 1,
      list: [],
      videoShow: false,
      questionsList: {}
    }
  },
  created () {
    this.getDetail()
  },
  mounted () {},
  methods: {
    // 获取组题详情数据
    async getDetail () {
      console.log('1' + this.item)
      try {
        const { data: res } = await detail(this.item)

        this.questionsList = res
        this.checkList(this.questionsList)
      } catch (error) {
        this.$message('获取数据失败')
      }
    },
    // 获取复选框绑定数据
    checkList (questionsList) {
      questionsList.options.forEach(item => {
        if (item.isRight === 1) {
          this.list.push(item.title)
        }
        console.log(this.list)
        return this.list
      })
    }
  },
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.information .el-col {
  margin: 15px 0;
}
.title {
  color: #0f0fff;
}
.el-radio {
  display: block;
  margin-bottom: 15px;
}
video {
  width: 300px;
  height: 300px;
}
.group {
  margin: 10px 0;
}
</style>
